<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <!-- <el-breadcrumb-item>
              <a href="#/home">首页</a>
            </el-breadcrumb-item>-->
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>列表权限</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card class="box-card">
            <el-table :data="rightsList" border stripe style="width: 100%">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="authName" label="权限名称">
                </el-table-column>
                <el-table-column prop="path" label="路径">
                </el-table-column>
                <el-table-column prop="level" label="权限等级">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.level==='0'">等级-</el-tag>
                        <el-tag type="success" v-else-if="scope.row.level==='1'">等级二</el-tag>
                        <el-tag type="warning" v-else>等级三</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    export default {
        // 组件名称
        name: 'Rights',
        // 组件参数 接收来自父组件的数据
        props: {},
        // 局部注册的组件
        components: {},
        // 组件状态值
        data() {
            return {
                //初始化用户列表
                rightsList: [
                    {
                        "authName": '商品管理',
                        "id": 1,
                        "level": "0",
                        "path": "goods",
                        "pid": 1
                    },
                    {
                        "authName": '订单管理',
                        "id": 2,
                        "level": "1",
                        "path": "orders",
                        "pid": 2
                    },
                    {
                        "authName": '权限管理',
                        "id": 3,
                        "level": "1",
                        "path": "rights",
                        "pid": 3
                    },
                    {
                        "authName": '商品列表',
                        "id": 4,
                        "level": "2",
                        "path": "goods",
                        "pid": 4
                    },
                    {
                        "authName": '添加商品',
                        "id": 5,
                        "level": "1",
                        "path": "goods",
                        "pid": 5
                    },
                    {
                        "authName": '订单列表',
                        "id": 6,
                        "level": "1",
                        "path": "orders",
                        "pid": 3
                    },
                    {
                        "authName": '用户列表',
                        "id": 7,
                        "level": "2",
                        "path": "users",
                        "pid": 7
                    },
                    {
                        "authName": '添加订单',
                        "id": 8,
                        "level": "0",
                        "path": "orders",
                        "pid": 8
                    }
                ]
            }
        },
        // 计算属性
        computed: {},
        // 侦听器
        watch: {},
        // 组件方法
        methods: {
            //获取用户列表 get请求 2种参数list 
            async getRightsList() {
                const { data: res } = await $http.get('rights/list')
                if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')

                //获取用户列表成功 赋值到data数据中
                this.rightsList = res.data
            }

        },
        // 以下是生命周期钩子   注：没用到的钩子请自行删除
        /**
        * 在实例初始化之后，组件属性计算之前，如data属性等
        */
        beforeCreate() {
        },
        /**
        * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
        */
        created() {
            //调用获取用户权限列表
            // this.getRightsList()
        },
        /**
        * 在挂载开始之前被调用：相关的 render 函数首次被调用。
        */
        beforeMount() {
        },
        /**
        * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
        * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
        */
        mounted() {
        },
        /**
        * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
        * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
        */
        beforeUpdate() {
        },
        /**
        * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
        */
        updated() {
        },
        /**
        * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
        */
        activated() {
        },
        /**
        * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
        */
        deactivated() {
        },
        /**
        * 实例销毁之前调用。在这一步，实例仍然完全可用。
        */
        beforeDestroy() {
        },
        /**
        * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
        * 所有的事件监听器会被移除，所有的子实例也会被销毁。
        */
        destroyed() {
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>

</style>